<!DOCTYPE html>
<html lang="zh-Hans">

<!-- Head tag -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Description-->
    
        <meta name="description" content="Note">
    

    <!--Author-->
    
        <meta name="author" content="兰陵忧患生">
    

    <!-- Title -->
    
    <title>Client-Side JavaScript | Lan</title>

    <!-- Bootstrap Core CSS -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet"
      href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/styles/default.min.css">
    <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js"></script>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/style.css">

    <!-- Custom Fonts -->
    <link href="//cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <!-- Content -->
    <section class="article-container">
<!-- Back Home -->
<a class="nav-back" href="/">
    <i class="fa fa-puzzle-piece"></i>
</a>

<!-- Page Header -->
<header class="intro-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <h1>Client-Side JavaScript</h1>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">
            <!-- TOC -->
            <div class="toc-article col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#Web-浏览器中的-JavaScript"><span class="toc-text">Web 浏览器中的 JavaScript</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#客户端-JavaScript"><span class="toc-text">客户端 JavaScript</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#在-HTML-里嵌入-JavaScript"><span class="toc-text">在 HTML 里嵌入 JavaScript</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript-程序的执行"><span class="toc-text">JavaScript 程序的执行</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#兼容性和互用性"><span class="toc-text">兼容性和互用性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#安全性"><span class="toc-text">安全性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#客户端框架"><span class="toc-text">客户端框架</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Window-对象"><span class="toc-text">Window 对象</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#计时器"><span class="toc-text">计时器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#浏览器定位和导航"><span class="toc-text">浏览器定位和导航</span></a></li></ol></li></ol>
</div>

            <!-- Post Main Content -->
            <div class="post-content col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <h1 id="Web-浏览器中的-JavaScript"><a href="#Web-浏览器中的-JavaScript" class="headerlink" title="Web 浏览器中的 JavaScript"></a>Web 浏览器中的 JavaScript</h1><h2 id="客户端-JavaScript"><a href="#客户端-JavaScript" class="headerlink" title="客户端 JavaScript"></a>客户端 JavaScript</h2><ul>
<li><p>Window对象是所有客户端 JavaScript 特性和API的主要接入点。</p>
</li>
<li><p>Window 对象有一个引用自身的属性，叫做 window。</p>
</li>
<li><p>Window 对象中其中一个最重要的属性是 document，它引用 Document 对象。</p>
</li>
<li><p>JavaScript 在 Web 应用里会比在 Web 文档里显得更加重要。JavaScript 增强了 Web 文档，但是设计良好的文档需要在禁用 JavaScript 后还能继续工作。</p>
</li>
<li>Web 应用本质上就是 JavaScript 程序，后者使用由 Web 浏览器提供的操作系统类型的服务，并且不用期望它们在禁用浏览器脚本后还能正常工作。</li>
</ul>
<h2 id="在-HTML-里嵌入-JavaScript"><a href="#在-HTML-里嵌入-JavaScript" class="headerlink" title="在 HTML 里嵌入 JavaScript"></a>在 HTML 里嵌入 JavaScript</h2><ol>
<li>内联，放置在 <code>&lt;script&gt;</code> 和 <code>&lt;/script&gt;</code> 标签对之间</li>
<li>放置在由 <code>&lt;script&gt;</code> 标签的 src 属性指定的外部文件中 （结束的 <code>&lt;/script&gt;</code> 不能丢）</li>
<li>放置在 HTML 事件处理程序中</li>
<li>放在一个 URL 中，这个 URL 使用特殊的 “javascript:” 协议</li>
</ol>
<ul>
<li><p>内容 （HTML）和行为 （JavaScript 代码） 应该尽量地保持分离。</p>
</li>
<li><p><code>&lt;script&gt;</code> language 属性已经被废弃，不应该再使用了。</p>
</li>
</ul>
<h2 id="JavaScript-程序的执行"><a href="#JavaScript-程序的执行" class="headerlink" title="JavaScript 程序的执行"></a>JavaScript 程序的执行</h2><ul>
<li><p>两个阶段</p>
<ul>
<li>载入文档内容</li>
<li>异步的，由事件驱动的。</li>
</ul>
</li>
<li><p>核心 JavaScript 和客户端 JavaScript 都有一个单线程执行模型。脚本和事件处理程序（无论如何）在同一个时间只能执行一个，没有并发性。</p>
</li>
<li><p>deferred.js 使得浏览器延迟脚本的执行，知道文档的载入和解析完成。</p>
</li>
<li><p>async.js 是的浏览器可以尽快地执行脚本，而不用在下载脚本时阻塞文档解析。</p>
</li>
<li><p>时间线</p>
<ul>
<li>document.readyState 属性的值是 “loading”</li>
<li>当 HTML 解析器遇到没有 async 和 defer 属性</li>
<li>当解析器设置了 async 属性的 <code>&lt;script&gt;</code> 元素时</li>
<li>文档解析完成，document.readyState 属性变成 “interactive”</li>
<li>执行所有由 defer 属性的脚本</li>
<li>浏览器在 Document 对象上触发 DOMContentLoaded 事件，标志程序执行从同步脚本执行阶段转换到了异步事件驱动阶段。</li>
<li>文档完全解析完成，浏览器等待其他内容载入</li>
<li>调用异步事件</li>
</ul>
</li>
</ul>
<h2 id="兼容性和互用性"><a href="#兼容性和互用性" class="headerlink" title="兼容性和互用性"></a>兼容性和互用性</h2><ul>
<li>功能检测</li>
<li>怪异模式和标准模式</li>
<li>浏览器测试</li>
<li>Internet Explorer 里的条件注释</li>
<li>可访问性</li>
</ul>
<h2 id="安全性"><a href="#安全性" class="headerlink" title="安全性"></a>安全性</h2><ul>
<li>JavaScript 不能做什么</li>
<li><p>同源策略</p>
<ul>
<li>脚本只能读取和所属文档来源相同的窗口和文档的属性。</li>
<li>文档来源包含协议，主机，以及载入文档的 URL 端口。</li>
</ul>
</li>
<li><p>脚本化插件和 ActiveX 控件</p>
</li>
<li>跨站脚本</li>
<li>拒绝服务攻击</li>
</ul>
<h2 id="客户端框架"><a href="#客户端框架" class="headerlink" title="客户端框架"></a>客户端框架</h2><ul>
<li>jQuery</li>
<li>Prototype</li>
<li>Dojo</li>
<li>YUI</li>
<li>Closure</li>
<li>GWT</li>
</ul>
<h1 id="Window-对象"><a href="#Window-对象" class="headerlink" title="Window 对象"></a>Window 对象</h1><h2 id="计时器"><a href="#计时器" class="headerlink" title="计时器"></a>计时器</h2><pre><code class="js">var t = setTimeout(updateClock, 6000) // 指定时间调用
clearTimeout(t) // 取消函数的执行
setInterval() // 重复调用
clearInterval() // 取消函数的后续调用
</code></pre>
<h2 id="浏览器定位和导航"><a href="#浏览器定位和导航" class="headerlink" title="浏览器定位和导航"></a>浏览器定位和导航</h2><ul>
<li></li>
</ul>

 
                <!-- Meta -->
                <div class="post-meta">
                    <hr>
                    <br>
                    <div class="post-tags">
                        
                            

<a href="/tags/JavaScript/">#JavaScript</a>


                        
                    </div>
                    <div class="post-date">
                        2017 年 09 月 16 日
                    </div>
                </div>
            </div>

            <!-- Comments -->
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <!-- Disqus Comments -->


            </div>
        </div>
    </div>
</article>
</section>

    <!-- Scripts -->
    <!-- jQuery -->
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript">
	hljs.initHighlightingOnLoad();
	console.log('Hexo-theme-hollow designed by zchen9 http://www.chen9.info © 2015-' + (new Date()).getFullYear());
</script>

    <!-- Google Analytics -->
    

</body>

</html>